<!--
 * @Description: 菜单管理-新建菜单
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-03-05
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-09-25
-->
<script lang="ts" setup>
  import { Form, message } from 'ant-design-vue'
  import { computed, reactive, watch } from 'vue'

  import { requestSavePermission } from '/@/api/system/ysys-user/permission'
  import { PermissionTypeDesc } from '/@/api/system/ysys-user/permission/enum'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { getModuleList } from '/@/storage'

  const props = defineProps({
    visible: { type: Boolean, default: false },
    pId: { type: Number, default: NaN },
    pName: { type: String, default: '' },
  })

  const emits = defineEmits(['update:visible', 'success'])

  const visible = computed({
    get: () => props.visible,
    set: (val) => emits('update:visible', val),
  })

  watch(
    () => visible.value,
    (newVal) => {
      if (newVal) onPageshow()
      else onPageHide()
    },
  )

  /**
   * 页面显示
   */
  const onPageshow = () => {}

  /**
   * 页面关闭
   */
  const onPageHide = () => resetFields()

  /** 模块id */
  const moduleId = getModuleList()[0].moduleId

  /** 表单配置 */
  const form = reactive({
    state: {
      /** 类型 */
      permissionType: null,
      /** 名称 */
      permissionName: '',
      /** 权重 */
      permissionWeight: null,
      /** 路由 */
      permissionUrl: '',
      /** 描述 */
      permissionDesc: '',
    },
    rule: {
      permissionType: [{ required: true, message: '请选择类型' }],
      permissionName: [{ required: true, message: '请输入名称' }],
      permissionWeight: [{ required: true, message: '请输入权重' }],
    },
    options: {
      permissionType: Object.entries(PermissionTypeDesc).map((item) => ({ label: item[1], value: parseInt(item[0]) })),
    },
    onOk: () => {
      validate()
        .then(async () => {
          const { permissionType, permissionName, permissionWeight, permissionUrl, permissionDesc } = form.state
          const requestData: SavePermissionTypes.IRequest = { moduleId, permissionPId: props.pId, permissionType, permissionName, permissionWeight, permissionUrl, permissionDesc }
          if (props.pName) requestData.parentName = props.pName
          const { responseCode } = await requestSavePermission(requestData)
          if (responseCode === HttpCodeEnum.SUCCESS) {
            message.success('添加成功')
            visible.value = false
            emits('success')
          }
        })
        .catch(() => {})
    },
  })
  /** 表单hook */
  const { validate, validateInfos, resetFields } = Form.useForm(form.state, form.rule)
</script>

<template>
  <div class="add">
    <a-modal v-model:visible="visible" title="新建菜单" @ok="form.onOk">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="上级" v-if="props.pName">
          <a-input :value="props.pName" disabled />
        </a-form-item>
        <a-form-item label="类型" v-bind="validateInfos.permissionType">
          <a-select v-model:value="form.state.permissionType" :options="form.options.permissionType" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="名称" v-bind="validateInfos.permissionName">
          <a-input v-model:value="form.state.permissionName" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="权重" v-bind="validateInfos.permissionWeight">
          <a-input type="number" v-model:value="form.state.permissionWeight" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="路由" v-bind="validateInfos.permissionUrl">
          <a-input v-model:value="form.state.permissionUrl" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="备注" v-bind="validateInfos.permissionDesc">
          <a-input v-model:value="form.state.permissionDesc" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped></style>
